<template>
  <view class="card" @click.stop="goPage">
    <view class="card--header flex justify-between">
      <view class="order-sn">订单编号：{{ orderInfo.sn }}</view>
      <view class="status">{{ orderInfo.orderStatusName }}</view>
    </view>

    <view class="card--main flex">
      <u-image
        :src="orderInfo.orderGoodsDetailVo.imageUrl"
        width="160"
        height="160"
      ></u-image>
      <view
        class="ml-[20rpx] service-text"
        style="
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        "
      >
        <view class="service-text--name truncate">{{
          orderInfo.orderGoodsDetailVo.goodsName
        }}</view>
        <view class="mt-[16rpx]"
          >预约时间: {{ orderInfo.appointTime }} {{ orderInfo.weekDay }}</view
        >
        <view
          class="mt-[16rpx]"
          style="display: flex; justify-content: flex-end; line-height: 25rpx"
          >实付金额: ¥
          <div style="font-size: 18px">{{ orderInfo.orderAmount }}</div></view
        >
      </view>
    </view>

    <view class="card--footer flex justify-between">
      <view class="text-primary">
        <template v-if="orderInfo.cancelBtnTime">
          <view class="flex" v-if="timeStamp >= 0">
            <u-count-down
              :timestamp="timeStamp"
              format="mm:ss"
              :font-size="26"
              :separator-size="26"
              @end="timeStamp = 0"
            />
            <text class="ml-[10rpx]">后自动取消</text>
          </view>
        </template>
      </view>

      <view>
        <slot></slot>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, watchEffect } from "vue";
import { apiOrderClose } from "@/api/order";

const props = withDefaults(
  defineProps<{
    orderInfo?: any; // 底部
  }>(),
  {
    orderInfo: {},
  }
);
const timeStamp = ref<number | null>(0);

watchEffect(() => {
  // 获取倒计时段
  const endTimestamp = props.orderInfo.cancelBtnTime;
  const startTimestamp = new Date().getTime() / 1000;
  timeStamp.value = (endTimestamp - startTimestamp) * 1000;
  if (timeStamp.value === 0) orderClose();
});

// 超时关闭订单
const orderClose = async () => {
  await apiOrderClose({
    outTradeNo: props.orderInfo.id,
  });
};

const goPage = () => {
  uni.navigateTo({
    url: `/pages/order_detail/index?id=${props.orderInfo.id}`,
  });
};
</script>

<style lang="scss" scoped>
.card {
  border-radius: 14rpx;
  background-color: #ffffff;
  margin: 20rpx 20rpx 0 20rpx;

  &--header {
    padding: 24rpx 30rpx;
    font-size: 26rpx;
    border-bottom: 1px solid #e5e5e5;
    .order-sn {
      color: #222222;
    }
    .status {
      color: #f36161;
    }
  }

  &--main {
    padding: 30rpx;
    color: #555555;
    font-size: 26rpx;

    .service-text {
      &--name {
        width: 460rpx;
        font-weight: 500;
        color: #222222;
        font-size: 32rpx;
      }
    }
  }

  &--footer {
    padding: 20rpx 30rpx;
    font-size: 26rpx;
    border-top: 1px solid #e5e5e5;
  }
}
</style>
